<style lang="less">
@import "./adManage.less";
</style>
<template>
  <div class="search" style="background-color:white">
    <template>
      <Form ref="adDetailForm" :model="adDetailForm" :label-width="110" :rules="adDetailFormValidate">

        <div style="overflow:hidden;">
          <div style="width: 500px;float:left">
            <Form-item label="广告名称:" prop="adName" style="padding-top:16px;">
              <Input type="text" v-model="adDetailForm.adName" clearable placeholder="请输入广告名称" style="width: 400px" />
            </Form-item>
            <Form-item label="广告类型:" prop="mediaType">
              <Input type="text" v-model="adDetailForm.mediaType" clearable placeholder="请选择广告类型" style="width: 400px" />
            </Form-item>
            <Form-item label="开始时间:" prop="startTime">
              <DatePicker type="date" v-model="adDetailForm.startTime" clearable placeholder="请选择广告开始时间" style="width: 220px"></DatePicker>
            </Form-item>
            <Form-item label="结束时间:" prop="endTime">
              <DatePicker type="date" v-model="adDetailForm.endTime" clearable placeholder="请选择广告结束时间" style="width: 220px"></DatePicker>
            </Form-item>
            <Form-item label="Android链接:" prop="adLink">
              <Input type="text" v-model="adDetailForm.adLink" clearable placeholder="请输入Android链接地址" style="width: 400px" />
            </Form-item>
            <Form-item label="ios链接:" prop="iosLink">
              <Input type="text" v-model="adDetailForm.iosLink" clearable placeholder="请输入IOS链接地址" style="width: 400px" />
            </Form-item>
           <Form-item label="small链接:" prop="smallLink">
              <Input type="text" v-model="adDetailForm.smallLink" clearable placeholder="请输入小程序链接地址" style="width: 400px" />
            </Form-item>

            <Form-item label="图片上传:">
              <image-component
                ref="adPiclistComp"
                @on-remove-success="adPiclistRemoveSuccess"
                @on-add-success="adPiclistAddSuccess">
              </image-component>
            </Form-item>

          </div>
        </div>

        <!-- <hr style="border-bottom:1px solid #dddee1; height:1px;"> -->
      </Form>

      <div style="padding:16px 0px;margin-left:2px;" class="operation">
        <Button @click="cancelSubmitAd" icon="android-arrow-back" style="width:120px;margin-right:10px;">返回主页</Button>
        <!-- <Button :loading="submitLoading" @click="submitHotel" type="primary" :icon="hotelButtonTypeIcon" style="width:120px;">{{hotelButtonTypeText}}</Button> -->
        <Button :loading="submitLoading" @click="submitAd" type="primary" :icon="adButtonTypeIcon" style="width:120px;">{{adButtonTypeText}}</Button>

      </div>
      <!-- <supplier-search-comp ref="supplierSearchModal" @on-selected='selectedSupplier'></supplier-search-comp> -->
    </template>
  </div>
</template>

<script>
import dateFormatUtil from "@/utils/dateFormatUtil";
import tinymce from "tinymce";
import ImageComponent from "./../../comm-comp/imageComponent.vue";

// import SupplierSearchComp from "./supplierSearchComp.vue"

export default {
  name: "article-detail",
  components: {
    ImageComponent
    // SupplierSearchComp
  },
  data() {
    return {
      loading: true,
      adDetailForm: {
        adName: "",
        mediaType: "",
        startTime: new Date(),
        endTime: new Date(),
        adLink: "",
        iosLink: "",
        smallLink: "",
        piclist:""
      },
      adDetailModalType: 0,
      adButtonTypeText: "添加",
      adButtonTypeIcon: "plus-round",

      adDetailFormValidate: {
        adName: [
          { required: true, message: "广告名称不能为空", trigger: "blur" },
          { max: 64, message: '广告名称太长'}
        ],
      },
      submitLoading: false
    };
  },
  methods: {
    init() {},

    resetFormByType: function(type, updatearticle) {
      console.log(updatearticle);
      this.currSelectedSupplier = "";
      if (0 === type) {
        this.adDetailModalType = 0;
        this.adButtonTypeText = "添加";
        this.adButtonTypeIcon = "plus-round";

        this.$refs.adPiclistComp.initByType("ad",0,null);
      } else if (1 === type) {
        this.adDetailModalType = 1;
        this.adButtonTypeText = "编辑";
        this.adButtonTypeIcon = "edit";
        this.currSelectedSupplier = updatearticle.supplier;
        this.adDetailForm = updatearticle;

        this.$refs.adPiclistComp.initByType("ad",1,updatearticle.piclist);
      } else {
      }

      this.$refs.adDetailForm.resetFields();
      for (let attr in this.adDetailForm) {
        if (this.adDetailForm[attr] == null) {
          this.adDetailForm[attr] = "";
        }
      }
    },

    popSupplierSearchMoadl: function() {
      this.$refs.supplierSearchModal.openSupplierSearchModal(true);
    },
    selectedSupplier(res) {
      this.currSelectedSupplier = res;
      this.adDetailForm.supplierId = res.id;
    },

    submitAd() {
      this.$refs.adDetailForm.validate(valid => {
        if (valid) {
          let url = "";
          // if(this.adDetailForm.startTime==""){
          //   this.adDetailForm.startTime = new Date(this.adDetailForm.startTime);
          // }
          // if(this.adDetailForm.endTime==""){
          //   this.adDetailForm.endTime = new Date(this.adDetailForm.endTime);
          // }
          if (this.adDetailModalType === 1) {
            // 编辑特产
            url = "/advertisement/update";
            this.submitLoading = true;
            this.putRequest(url, this.adDetailForm).then(res => {
              this.submitLoading = false;
              if (res.success === true) {
                this.$Message.success("更新操作成功");
                this.$emit("on-ad-success", true);
                // this.init();
              }
            });
          } else {
            url = "/advertisement/create";
            this.submitLoading = true;
            var createarticle = this.adDetailForm;
            if (createarticle.id) delete createarticle.id;
            this.postRequest(url, createarticle).then(res => {
              this.submitLoading = false;
              if (res.success === true) {
                this.$Message.success("操作成功");
                this.$emit("on-ad-success", true);
              }
            });
          }
        }
      });
    },
    cancelSubmitAd: function() {
      this.$emit("on-ad-cancel", true);
    }

    //picture methods start
    ,
    adPiclistRemoveSuccess:function(res){
      if(res.flag){
        this.adDetailForm.piclist = res.pathStr;
      }
    },
    adPiclistAddSuccess:function(res){
      if(res.flag){
        this.adDetailForm.piclist = res.pathStr;
      }
    }
     //picture methods end

  },
  mounted() {
    this.init();
  }
};
</script>
